<template>
  <div>
    <div class="nctouch-home-block">
      <div class="item-pic" style="position: relative;">
        <img
          src="https://image.10street.cn/image/4c/15/4c15683ca5bfc2d8e44166e785c60c5d.png"
          alt
          style="width: 100%;"
        />
        <a
          href="javascript:void(0);"
          style="display: inline-block; position: absolute; width: 100%; height: 100%; left: 0%; top: 0%;"
        ></a>
      </div>
    </div>

    <div class="timeLimit">
      <div class="timeLimitBlock">
        <div class="timeLimitTop">
          <div class="timeLimitTitleBlock clearfix">
            <div class="fl tit">限时秒杀</div>
            <div class="fl time">
              <span>16点场</span>
              <van-count-down :time="time" />
            </div>
            <a href="javascript:void(0)" class="more fr">
              更多
              <img src="images/home_2019/gengduo.png" alt />
            </a>
          </div>
          <div class="discount">
            <div class="discount_list">
              <a href="javascript:void(0)">
                <img
                  src="https://image.10street.cn/image/af/56/af562d682c72b7de0ec3f290e47827b1.jpg"
                  alt
                  class="goods-pic"
                />
                <div class="goods-price">
                  <p>
                    ￥
                    <em>19.9</em>
                  </p>
                  <h3>￥29.9</h3>
                </div>
              </a>
            </div>
            <div class="discount_list">
              <a href="javascript:void(0)">
                <img
                  src="https://image.10street.cn/image/e9/13/e913ce7e3e1cb2cd085e3ee192e433a5.jpg"
                  alt
                  class="goods-pic"
                />
                <div class="goods-price">
                  <p>
                    ￥
                    <em>599</em>
                  </p>
                  <h3>￥999</h3>
                </div>
              </a>
            </div>
            <div class="discount_list">
              <a href="javascript:void(0)">
                <img
                  src="https://image.10street.cn/image/ca/46/ca4663cdb2c10304e96c13c3aa85665b.jpg"
                  alt
                  class="goods-pic"
                />
                <div class="goods-price">
                  <p>
                    ￥
                    <em>239</em>
                  </p>
                  <h3>￥328</h3>
                </div>
              </a>
            </div>
            <div class="discount_list">
              <a href="javascript:void(0)">
                <img
                  src="https://image.10street.cn/image/28/09/280986e39174251ab77701859896c506.jpg"
                  alt
                  class="goods-pic"
                />
                <div class="goods-price">
                  <p>
                    ￥
                    <em>24.9</em>
                  </p>
                  <h3>￥45</h3>
                </div>
              </a>
            </div>
          </div>
        </div>
        <div class="timeLimitBottom clearfix">
          <div class="fl timeLimitBottomItem">
            <div class="bottomTop">
              <h3>{{group.mainTitle}}</h3>
              <p style="color: rgb(255, 137, 23);">{{group.subTitle}}</p>
            </div>
            <div class="bottomB">
              <img
                :src="groups_goods"
                alt
              />
            </div>
          </div>
          <div class="fl timeLimitBottomItem" v-for="item in data" :key="item.data">
            <div class="bottomTop">
              <h3>
                <img
                  :src="item.imageUrl"
                  alt
                />{{item.mainTitle}}
              </h3>
              <p style="color: rgb(255, 108, 101);">{{item.subTitle}}</p>
            </div>
            <div class="bottomB">
              <img
                :src="item.goods[0].imageUrl"
                alt
              />
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import Vue from 'vue';
import { CountDown } from 'vant';

Vue.use(CountDown);
export default {
  props:["val"],
  data(){
    return {
      data:"",
      group:"",
      groups_goods:"",
      time: 30 * 60 * 60 * 1000,
    }
  },
  watch:{
    val(){
      this.group = JSON.parse(this.val.itemData)[0].groups
      this.data = JSON.parse(this.val.itemData)[0].items
      this.groups_goods = this.group.goods[0].imageUrl
    }
  }
};
</script>

<style lang='stylus' scoped>
.fl
  float: left !important;


.fr
  float: right !important;


.nctouch-home-block
  width: 100%;
  clear: both;

  .item-pic
    font-size: 0;
    width: 100%;
    margin: 0 auto;
  


.timeLimit
  background: #F5F6F7;

  .timeLimitBlock
    background: #fff;
    border-radius: 0.055rem;
    margin: 0 0.1rem;

    .timeLimitTop
      padding: 0.132rem;
      border-bottom: 1px solid #EEEEEE;

      .timeLimitTitleBlock
        overflow: hidden;
        width: 100%;
        align-items: center;
        margin-bottom: 0.165rem;

        .tit
          font-size: 0.145rem;
          color: #333;
        

        .more
          font-size: 0.13rem;
          color: #666;
        

        .time
          border-radius: 0.088rem;
          height: 0.154rem;
          border: 0.011rem solid #FE3C3C;
          overflow: hidden;
          text-align: center;
          padding-right: 0.066rem;
          margin-left: 0.11rem;
          font-size: 0.11rem;
          line-height: 0.165rem;
          div
            float left 
            color: #FE3C3C;
            font-size: 0.11rem;
            line-height: 0.165rem;
          span
            background: linear-gradient(270deg, #FE3E3E 0%, #FE3C3C 100%);
            color: #fff;
            display: inline-block;
            padding: 0 0.033rem;
            border-radius: 0.077rem;
            height: 0.154rem;
            margin-right: 0.0663rem;
            float left
          
        
      

      .discount
        display: flex;
        margin: 0 auto;
        position: relative;
        overflow: hidden;
        z-index: 1;

        .discount_list
          width: 33.33%;
          min-width: 33.33%;
          text-align: center;
          height: 100%;
          position: relative;

          img
            width: 1rem;
            height: 1rem;
          

          .goods-price
            h3
              font-size: 0.11rem;
              color: #999999;
              text-decoration: line-through;
              display: inline-block;
              margin-left: 0.044rem;
            

            p
              font-size: 0.088rem;
              color: #FF4A42;
              display: inline-block;

              em
                font-size: 0.13rem;
              
            
          
        
      
    

    .timeLimitBottom
      &::after
        content: '';
        clear: both;
        display: block;
      

      padding: 0.1rem 0 0.176rem;

      .timeLimitBottomItem
        width: 33.333333%;
        text-align: center;

        .bottomTop
          text-align: left;
          margin: 0 0.11rem;

          h3
            font-size: 0.15rem;
            color: #333;
            margin-bottom: 0.044rem;

            img
              height: 0.121rem;
              margin: 0rem 0.044rem 0 0;
            
          

          p
            font-size: 0.11rem;
            height: 0.176rem;
            line-height: 0.176rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          
        

        .bottomB img
          width: 0.77rem;
          height: 0.77rem;
          margin-top: 0.176rem;
        
      
    
  

</style>